<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工插入</title>
    <script src="../../js/jquery-1.8.3.min.js"></script>
    <script src="../../js/common.js"></script>
    <script>
        window.onload=function(){
            $.get(url+"dept/all",function(data){
                //data为对象数组
                let str='';
                $.each(data,function(i,obj){
                    str+=`<option value="${obj.deptno}">${obj.dname}</option>`;
                });
                $("select[name=deptno]").html(str)
            },"json");
        }
        function load(obj){
            //输入字符流
            let f=new FileReader();
            //设置文件来源 blob:binary large object 二进制大对象
            f.readAsDataURL(obj.files[0])
            //读取结束时装入图片标签中
            f.onload=function(e){
                //结果为base64位的字符串
                pic2.src=this.result
            }
        }
        function tijiao(){
            //向后端发送请求
            let data=new FormData(document.getElementsByTagName("form")[0]);
            //ajax:异步javascript扩展
            $.ajax({
                // 请求的地址
                url:url+"emp/insert",
                // 请求类型，默认为get
                type:"post",
                // 传递的数据
                data:data,
                // datatype:"json",
                // 浏览器是否处理数据
                processData:false,
                // 浏览器不进行编码
                contentType:false,
                // 异步设置，默认值为true,false表示同步
                // async:true,
                success:function(data){
                    // data表示回调数据
                    if (data==1){
                        alert("插入成功")
                        location.href="list.html"
                    }else{
                        alert("插入失败")
                    }
                }
            })
            return false;
        }
    </script>
</head>
<body>
<form action="list.html" enctype="multipart/form-data">
    <!--type默认值为text文本框 -->
    <!--    name和id都表示空间的名称，那么可重复，id是唯一的-->
    员工姓名:<input type="text" name="ename"value="">
    员工电话:<input type="text" name="tel" value="">
    员工领导：
    <select name="mgr">
        <option value="1">李总</option>
        <option value="2">小李</option>
        <option value="3">小张</option>
    </select>
    <br>
    入职日期：<input type="text" name="hiredate" value="">
    工资 <input type="text" name="sal" value="1">
    奖金<input type="text" name="comm" value="1">
    年龄<input type="text" name="age" value="1">
    职位：<input type="text" name="job" value=""><br>
    <input type="file" name="pic" id="pic" onchange="load(this)">
    展示图片:
    <img src="" alt="" id="pic2" width="100" height="100"><br>
    部门：
    <select name="deptno">
        <option value="1">行政部</option>
        <option value="2">销售部</option>
        <option value="3">销售二部</option>
    </select>
    <br>
    员工介绍：
    <textarea name="econtent" id="" cols="30" rows="10">
        介绍
    </textarea><br>
    <!-- submit表示提交按钮-->
    <input type="submit" value="提交" onclick="return tijiao()">
    <!--reset表示重置，表单控件还原为默认值 -->
    <input type="reset" value="重置">
</form>
</body>
</html>